<template>
  <div>
    <el-dialog title="班级巡班人员" :visible.sync="dialogVisible" :close-on-click-modal="false"
               :close-on-press-escape="false" @close="$emit('update:visible',false)">
      <div>
        <el-form label-width="80px" ref="editForm">
          <el-form-item label="班级:" prop="name" v-if="!trainningId">
            <component
                v-bind:is="item.propertyType"
                :property.sync="item"
                v-for="(item, index) in getPower"
                :key="index"
                @updateVal="updateVal"
            ></component>
          </el-form-item>
          <el-form-item label="班级:" prop="name" v-else>
            {{ detailOption ? detailOption.classes.class_name : '--' }}
          </el-form-item>
          <el-form-item label="巡班人员:">
            <div class="user-list">
              <el-button type="primary" @click="getUserList()" size="small"><i class="el-icon-plus"></i>选择班级巡班人员
              </el-button>
              <el-button @click="clearLine" size="small"><i class="el-icon-delete"></i>清空列表
              </el-button>
            </div>
            <div>
              <el-tag
                  :key="tag.id"
                  v-for="(tag,index) in dynamicTags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(index)"
                  class="mr-10"
              >{{ tag.realname }}
              </el-tag>
            </div>
          </el-form-item>
        </el-form>

      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closePOpup">取消</el-button>
        <el-button type="primary" size="small" @click="saveTrainingFn">确认并提交</el-button>
      </div>
      <MultipleTeacherModle :visible.sync="teacherVisible" @studentFn="studentFn"
                            :dynamicTagsArray="dynamicTagsArray"></MultipleTeacherModle>
    </el-dialog>
  </div>
</template>
<script>

export default {
  name: 'Dialog',
  props: ['visible', 'trainningId'],
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (!this.visible) {
        let txtLine = JSON.parse(JSON.stringify(this.getPower))
        txtLine.section_id.valueText = ''
        txtLine.section_id.child.valueText = ''
        this.getPower = JSON.parse(JSON.stringify(txtLine))
        this.dynamicTags = []
        this.dynamicTagsArray = {}
      } else {
        if (this.trainningId) {
          this.getDetail()
        }
      }
    }
  },
  data() {
    return {
      teacherVisible: false,
      dialogVisible: this.visible,
      optionForm: {},
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      },
      dynamicTags: [],
      dynamicTagsArray: {},
      detailOption: null
    }
  },
  created() {

  },
  methods: {
    async saveTrainingFn() {
      if (!this.optionForm.class_id && !this.trainningId) {
        this.$message.error('选择班级')
        return
      }
      if (!this.dynamicTags.length) {
        this.$message.error('选择班级巡班人员')
        return
      }
      let list_id = []
      for(let item of this.dynamicTags){
        list_id.push(item.id)
      }
      let option = {
        user_ids: list_id.join(','),
        class_id: this.trainningId ? this.detailOption.class_id : this.optionForm.class_id
      }
      if (this.trainningId) {
        option.id = this.trainningId
      }
      let data = await this.$post(this.trainningId ? this.api.classActive.training.edit : this.api.classActive.training.add, option);
      if (!data.code) {
        let txtLine = JSON.parse(JSON.stringify(this.getPower))
        txtLine.section_id.valueText = ''
        txtLine.section_id.child.valueText = ''
        this.getPower = JSON.parse(JSON.stringify(txtLine))
        this.clearLine()
        this.$message.success(data.msg)
        this.$emit('InitFn')
        this.closePOpup()
      } else {
        this.$message.error(data.msg)
      }
    },
    // 更新值
    updateVal(option) {
      // console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.optionForm[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.optionForm[option.select[i].name] = option.select[i].valueText
          } else {
            this.optionForm[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    },
    handleClose(index) {
      this.dynamicTags.splice(index, 1)
    },
    studentFn(option) {
      console.log('option:', option)
      this.dynamicTags = []
      let list = [];
      for (let i in option) {
        list.push(option[i])
      }
      this.dynamicTags = JSON.parse(JSON.stringify(list))
    },
    getUserList(){
      let list = {};
      for (let item of this.dynamicTags) {
        list[item.id] = item
      }
      this.dynamicTagsArray = JSON.parse(JSON.stringify(list))
      this.teacherVisible = true
    },
    // 清空选择项
    clearLine() {
      this.dynamicTags = []
      this.dynamicTagsId = []
      this.dynamicTagsArray = {}
      this.optionForm.join_user = ''
    },
// 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    // 获取详情信息
    async getDetail() {
      let data = await this.$fetch(this.api.classActive.training.edit, {id: this.trainningId})
      console.log(data)
      this.detailOption = data.vo
      let a = {}
      for (let i in data.vo.user_ids) {
        a[data.vo.user_ids[i].id] = data.vo.user_ids[i]
      }
      this.studentFn(a)
    }
  }
}
</script>
<style>
.user-list {
  display: flex;
  align-items: center;
}
</style>
